<template>
  <el-row>
    <el-form-item label="控件标题">
      <el-input v-model="state.activeData._config_.label" placeholder="请输入控件标题" />
    </el-form-item>
    <el-form-item label="占位提示" v-if="state.activeData._config_.goodKey !== 'editor'">
      <el-input v-model="state.activeData.placeholder" placeholder="请输入占位提示" />
    </el-form-item>
    <el-form-item label="默认值">
      <com-select
        v-model="state.activeData._config_.defaultValue"
        placeholder="选择默认值"
        clearable
        v-if="state.activeData._config_.goodKey === 'comSelect'"
        :multiple="state.activeData.multiple"
        :key="state.key"
      />
      <dep-select
        v-model="state.activeData._config_.defaultValue"
        placeholder="选择默认值"
        clearable
        v-if="state.activeData._config_.goodKey === 'depSelect'"
        :multiple="state.activeData.multiple"
        :key="state.key"
      />
      <pos-select
        v-model="state.activeData._config_.defaultValue"
        placeholder="选择默认值"
        clearable
        v-if="state.activeData._config_.goodKey === 'posSelect'"
        :multiple="state.activeData.multiple"
        :key="state.key"
      />
      <user-select
        v-model="state.activeData._config_.defaultValue"
        placeholder="选择默认值"
        clearable
        v-if="state.activeData._config_.goodKey === 'userSelect'"
        :multiple="state.activeData.multiple"
        :key="state.key"
      />
      <!-- <BillRule v-model="state.activeData._config_.defaultValue" placeholder="选择默认值" clearable
        v-if="state.activeData._config_.goodKey==='billRule'" :key="state.key" /> -->
      <el-input
        v-model="state.activeData._config_.defaultValue"
        placeholder="请输入默认值"
        :value="setDefaultValue(state.activeData._config_.defaultValue)"
        @input="onDefaultValueInput(state.activeData, state.activeData._config_.defaultValue)"
        v-if="state.activeData._config_.goodKey === 'editor'"
      />
    </el-form-item>
    <el-form-item label="能否清空" v-if="state.activeData._config_.goodKey !== 'editor'">
      <el-switch v-model="state.activeData.clearable" />
    </el-form-item>
    <el-form-item label="能否搜索" v-if="['depSelect', 'posSelect'].includes(state.activeData._config_.goodKey)">
      <el-switch v-model="state.activeData.filterable" />
    </el-form-item>
    <el-form-item label="能否多选" v-if="needMultiple">
      <el-switch v-model="state.activeData.multiple" @change="multipleChange" />
    </el-form-item>
    <el-form-item label="是否禁用" v-if="state.activeData._config_.goodKey !== 'editor'">
      <el-switch v-model="state.activeData.disabled" />
    </el-form-item>
    <el-form-item label="是否必填">
      <el-switch v-model="state.activeData._config_.required" />
    </el-form-item>
  </el-row>
</template>
<script setup lang="ts" name="CommonRight">
import { computed, reactive } from "vue";
import { onDefaultValueInput, setDefaultValue } from "./mixin";
const props = defineProps({
  activeData: {
    type: Object,
    default: () => ({})
  }
});
const state = reactive({
  key: +new Date(),
  activeData: {} as any
});
const propsData = toRef(props);
state.activeData = propsData.value.activeData;

const needMultiple = computed(() => {
  return ["posSelect", "userSelect", "comSelect", "depSelect"].indexOf(state.activeData._config_.goodKey) > -1;
});

const multipleChange = (val: any) => {
  state.activeData._config_.defaultValue = val ? [] : "";
  state.activeData._config_.renderKey = +new Date();
  state.key = +new Date();
};
const emits = defineEmits(["updateActiveData"]);
watch(
  () => state.activeData,
  val => {
    emits("updateActiveData", val);
  }
);
</script>
